<template>
  <div class="meeting">
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">会议</el-menu-item>
      <!-- <el-menu-item index="2">通话</el-menu-item> -->
    </el-menu>
    <div class="content">
      <div class="flex1">
        <div class="flex_start meeting_list" v-if="activeIndex==1">
          <div class="item">
            <img src="@/assets/images/icon1.jpg" class="icon" alt="">
            <p>发起会议</p>
          </div>
          <div class="item">
            <img src="@/assets/images/icon2.jpg" class="icon" alt="">
            <p>加入会议</p>
          </div>
          <div class="item">
            <img src="@/assets/images/icon3.jpg" class="icon" alt="">
            <p>预约会议</p>
          </div>
        </div>
        <div v-else-if="activeIndex==2">通话</div>
      </div>
      <div class="flex1">
        <div class="record" v-if="activeIndex==1">
          <h1>12月8号 今天</h1>
          <el-divider>暂无会议</el-divider>
          <h2>历史会议</h2>
          <ul>
            <li class="meet_item flex_box">
              <span class="iconfont icon-shipin"></span>
              <div class="flex1">
                <span>高旭微发起的视频会议</span>
                <p class="meet_info">
                  <span>4月7日</span>
                  <el-divider direction="vertical"></el-divider>
                  <span>14:00-15:00</span>
                  <el-divider direction="vertical"></el-divider>
                  <span>5人</span>
                </p>
              </div>
            </li>
          </ul>
        </div>
        <div class="record" v-else-if="activeIndex==2">通话</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      activeIndex:'1'
    }
  },
  methods:{
    handleSelect(val) {
      this.activeIndex = val
    }
  }
}
</script>

<style lang="stylus" scoped>
.meeting
  padding 0 50px 10px
  height: 100%
  box-sizing border-box
  .el-menu-demo
    margin-bottom: 40px
  .content
    display: flex
    height: calc(100% - 82px)
    .record
      height: 100%
      padding 0 50px
      box-sizing border-box
      border-left: 1px solid #eee
    .meeting_list
      flex-wrap: wrap
      .item 
        padding 10px 20px
        text-align: center
        font-size 14px
        line-height: 30px
        cursor pointer
        .icon
          width: 70px
    h1
      line-height: 40px
    h2
      font-size 14px
      line-height: 40px
    .meet_item
      padding 10px
      font-size 14px
      line-height 20px
      .icon-shipin
        width: 30px
        height: 30px
        text-align: center
        line-height: 30px
        background #ddd
        border-radius: 4px
        margin-right 10px
      .meet_info
        color #999
        font-size 12px
</style>